<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	response.setHeader("X-Frame-Options", "SAMEORIGIN");
%>
<head>
<title>可编辑表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/page-min.css" rel="stylesheet" type="text/css" />
<!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
<link href="/assets/css/prettify.css" rel="stylesheet" type="text/css" />
<style type="text/css">
code {
	padding: 0px 4px;
	color: #d14;
	background-color: #f7f7f9;
	border: 1px solid #e1e1e8;
}
</style>
</head>
<body>

	<div class="container">
		<div class="row">
			<div class="span21 offset3 control-row-auto">
				<div id="grid"></div>
			</div>
		</div>
		 <p>
      <button id="btnSave" class="button button-primary">提交</button>
    </p>
	</div>
	<script type="text/javascript" src="/assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="/assets/js/bui-min.js"></script>

	<script type="text/javascript" src="/assets/js/config-min.js"></script>
	<script type="text/javascript">
		BUI.use('common/page');
	</script>
	<!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
	<script type="text/javascript" src="/assets/js/prettify.js"></script>
	<script type="text/javascript">
		$(function() {
			prettyPrint();
		});
	</script>
	<script type="text/javascript">
	BUI.use(['bui/grid','bui/data'],function (Grid,Data) {

	    var columns = [{title : '学校名称',dataIndex :'school',editor : {xtype : 'text',rules:{required:true}}},
	            {title : '入学日期',dataIndex :'enter',editor : {xtype : 'text',rules:{required:true}},renderer : Grid.Format.dateRenderer},//使用现有的渲染函数，日期格式化
	            {title : '毕业日期',dataIndex :'outter',editor : {xtype : 'text',rules:{required:true},validator : function(value,obj){
	              //if(obj.enter && value && obj.enter > value){
	                //return '毕业日期不能晚于入学日期！'
	             // }
	            }},renderer : Grid.Format.dateRenderer},
	            {title : '备注',dataIndex :'memo',width:200,editor : {xtype : 'text'}}
	            
	          ],
	      //默认的数据
	      data = [{school:'请输入学校名称',enter:'请输入入学时间',outter:'请输入毕业时间',memo:'请添加学生评论'},
	              {school:'请输入学校名称',enter:'请输入入学时间',outter:'请输入毕业时间',memo:'请添加学生评论'},
	              {school:'请输入学校名称',enter:'请输入入学时间',outter:'请输入毕业时间',memo:'请添加学生评论'},
	              {school:'请输入学校名称',enter:'请输入入学时间',outter:'请输入毕业时间',memo:'请添加学生评论'},
	              {school:'请输入学校名称',enter:'请输入入学时间',outter:'请输入毕业时间',memo:'请添加学生评论'},
	              {school:'请输入学校名称',enter:'请输入入学时间',outter:'请输入毕业时间',memo:'请添加学生评论'},
	              {school:'请输入学校名称',enter:'请输入入学时间',outter:'请输入毕业时间',memo:'请添加学生评论'}
	             ],
	      store = new Data.Store({
	        data:data
	      }),
	      editing = new Grid.Plugins.CellEditing(),
	      grid = new Grid.Grid({
	        render : '#grid',
	        columns : columns,
	        width : 700,
	        forceFit : true,
	        store : store,
	        plugins : [Grid.Plugins.CheckSelection,editing],
	        tbar:{
	            items : [{
	              btnCls : 'button button-small',
	              text : '<i class="icon-plus"></i>添加',
	              listeners : {
	                'click' : addFunction
	              }
	            },
	            {
	              btnCls : 'button button-small',
	              text : '<i class="icon-remove"></i>删除',
	              listeners : {
	                'click' : delFunction
	              }
	            }]
	        }

	      });
	    grid.render();

	    function addFunction(){
	      var newData = {school :'请输入学校名称'};
	      store.add(newData);
	      editing.edit(newData,'school'); //添加记录后，直接编辑
	    }

	    function delFunction(){
	      var selections = grid.getSelection();
	      store.remove(selections);
	    }

	    $('#btnSave').on('click',function(){
	        if(editing.isValid()){
	          var records = store.getResult();
	          alert(BUI.JSON.stringify(records)); //json转string
	          $.post("put",{'records':BUI.JSON.stringify(records)},function(date){
	        	  alert(BUI.JSON.stringify(date))
	        	  
	          });
	        }
	      });


	  });
	</script>
<body>
</html>
